<template>
    <!-- 表格图片相册展示组件 -->
    <div class="pic-container">
        <a-image
            :preview="{ visible: false }"
            :width="containerWidth"
            :style="{height: containerHeight }"
            :src="cuImgUrl+ `?w=${width}&h=${height}`"
            :fallback="IMG_FALLBACK"
            @click.stop="onClickPreviewButton"
        />
        <div style="display: none">
            <a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
                <a-image v-for="(item, index) in preImgList" :key="'pre' + index" :src="item" />
            </a-image-preview-group>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue';
import { isNumber } from '@/utils/is';
import IMG_FALLBACK from '@/assets/images/fallback.png';

interface Props {
    height?: number | string,
    width?: number | string,
    visit?: string,
    src?: string,
    files?: Array<string>,
}
const props = withDefaults(defineProps<Props>(), {
    height: 50,
    width: 50,
    visit: undefined,
    src: undefined,
    files: ()=> [],
});
const containerWidth = computed(() => {
    const width = props.width;
    if (isNumber(width)) return `${width}px`;
    return width;
});
const containerHeight = computed(() => {
    const height = props.height;
    if (isNumber(height)) return `${height}px`;
    return height;
});
const visible = ref<boolean>(false);

const cuImgUrl = computed(()=> props.src); // 当前图片地址

const visitAddress = computed(()=>props.visit); // 访问地址

const fileImgList = computed(()=> props.files); // 图册数组 

const preImgList = ref<any[]>([]);

const onClickPreviewButton = () => {
    if(fileImgList.value && fileImgList.value.length){
        preImgList.value = fileImgList.value.map((item:string) =>{
            if(visitAddress.value) item = visitAddress.value + item;
            return item;
        });
    }else{
        preImgList.value = unref(cuImgUrl) ? [unref(cuImgUrl)] : [];
    }
    visible.value = true;
};
</script>